<!DOCTYPE html>
<html lang="zh">
<head>
  <#assign title="新增用户">
  <#include "/head.html">
</head>

<body>
  
  <div class="row">
    <div class="col-lg-12">
        <div class="card-body bg-white">
          
          <form id="submitForm" action="system/user/save" method="post" class="form-horizontal">
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="loginname">登录名</label>
              <div class="col-md-10">
              	<input type="text" class="form-control" id="loginname" name="loginname" value="" />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="username">用户名</label>
              <div class="col-md-10">
              	<input type="text" class="form-control" id="username" name="username" value="" />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="password">密码</label>
              <div class="col-md-10">
              	<input type="password" class="form-control" id="password" name="password" value="" />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="confirm_password">确认密码</label>
              <div class="col-md-10">
              	<input type="password" class="form-control" id="confirm_password" name="confirm_password" value="" />
              </div>
            </div>
            <div class="form-group file-group row">
              <label class="col-md-2 col-form-label" for="avatar">头像</label>
              <div class="col-md-10">
              	<div class="input-group">
	              <input type="text" class="form-control file-value d-none" id="avatar" name="avatar" value="" />
	              <input type="file" class="d-none" file-type="avatar" />
	              
	              <img id="avatarImg" src="" alt="..." class="img-avatar mr-3 d-none">
		          <div class="media-body">
		            <button class="btn btn-default file-browser" type="button">上传头像</button>
		            <p class="mt-1 mb-0">选择一张图片，裁剪后会自动生成68x68大小，上传图片大小不能超过1M。</p>
		          </div>
	            </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="telephone">手机</label>
              <div class="col-md-10">
              	<input type="text" class="form-control" id="telephone" name="telephone" value="" />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="email">邮箱</label>
              <div class="col-md-10">
              	<input type="text" class="form-control" id="email" name="email" value="" />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="sex">性别</label>
              <div class="col-md-10">
              	<div class="form-controls">
                  <div class="custom-control custom-radio custom-control-inline">
		            <input type="radio" id="sexOne" name="sex" class="custom-control-input" value="1">
		            <label class="custom-control-label" for="sexOne">男</label>
		          </div>
	              <div class="custom-control custom-radio custom-control-inline">
		            <input type="radio" id="sexTwo" name="sex" class="custom-control-input" value="2">
		            <label class="custom-control-label" for="sexTwo">女</label>
		          </div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="status">状态</label>
              <div class="col-md-10 h-28">
                <div class="custom-control custom-radio custom-control-inline">
	              <input type="radio" id="statusOne" name="status" class="custom-control-input" value="1" checked>
	              <label class="custom-control-label" for="statusOne">正常</label>
	            </div>
                <div class="custom-control custom-radio custom-control-inline">
	              <input type="radio" id="statusZero" name="status" class="custom-control-input" value="0">
	              <label class="custom-control-label" for="statusZero">停用</label>
	            </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label" for="roles">角色</label>
              <div class="col-md-10 h-28">
                
                <#list roleList as role>
                
	              <div class="custom-control custom-checkbox custom-control-inline">
	                <input type="checkbox" class="custom-control-input" id="role${role.id}" name="roles" value="${role.id}">
	                <label class="custom-control-label" for="role${role.id}">${role.description}</label>
	              </div>
                
                </#list>
                
              </div>
            </div>
          </form>
 
        </div>
    </div>
    
  </div>
  
<#include "/footer.html">

<script type="text/javascript">
$('#avatar').change(function() {
	$('#avatarImg').attr('src', $(this).val());
	$('#avatarImg').removeClass('d-none');
});

validateForm({
	'loginname': {
		required: true,
		remote: 'system/user/checkLoginname'
	},
	'username': {
		required: true
	},
	'password': {
		required: true,
		minlength: 5
	},
	'confirm_password': {
		required: true,
		minlength: 5,
		equalTo: '#password'
	},
	'telephone': {
		rangelength: [11, 11]
	},
	'email': {
		email: true
	},
	'status': {
		required: true
	},
	'roles': {
		required: true
	}
}, {
	'loginname': {
		remote: '该登录名已经存在'
	},
	'telephone': {
		rangelength: '请输入11位手机号码'
	}
});
</script>
</body>
</html>